<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      google.load("visualization", "1.0", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);

      function drawChart() {
        /* Creating a data table from an array that is previously formatted.
        Data array is created by ProcSnapshot class and formatted as such:
        [Timestamp, Private, Shared] or [PID, Private, Shared]
        Title reflects whether graph is over time or for a single snapshot.
        If over time: haxis="Timestamp", vaxis = memory type;
        Single snapshot: haxis=PID, vaxis = memory type.
        */
        var data = google.visualization.arrayToDataTable(%(data)s);
        var options = {title: "%(title)s",
                       hAxis: {title: "%(haxis)s",
                               titleTextStyle: {color: 'green'}},
                       vAxis: {title: "Memory [MB]",
                               titleTextStyle: {color: 'green'}},
                       isStacked: true
        };

        var cdiv = document.getElementById('chart_div');
        var chart = new google.visualization.ColumnChart(cdiv);
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <p> Purpose: to view the division of shared and private memory. </p>
    <!-- <p> Memory data was logged starting at %(timestamp)s </p> -->
    <p> Snapshot taken at %(timestamp)s </p>
    <div id="chart_div" style="width: 1200px; height: 800px;"></div>
    <p> System information: %(version)s </p>
  </body>
</html>
